<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<style>
    .tip-box {
        transform: translate(-50%, -100%);
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 10px 14px;
        position: fixed;
        top: 0px;
        left: 50%;
        border-radius: 6px;
        animation: tipFade 1;
        /* animation-duration: 3s; */

    }

    @keyframes tipFade {
        0% {
            transform: translate(-50%, -100%);
        }

        15% {
            transform: translate(-50%, 20px);
        }

        85% {
            transform: translate(-50%, 20px);
        }

        100% {
            transform: translate(-50%, -100%);
        }
    }
</style>

<body>
    <input type="button" value="打开提示窗" onclick="showTip()">
    <input type="button" value="打开提示窗" onclick="showTip('测试消息')">
    <input type="button" value="打开提示窗" onclick="showTip('请求失败',10)">
    <input type="button" value="打开提示窗" onclick="showTip('加载完成')">
    <input type="button" value="打开提示窗" onclick="showTip('网络离线')">
</body>
<script>
    var TipBox = Vue.extend({
        template: "<div class='tip-box' :style='getTime'>{{msg}}</div>",
        data: function () {
            return {
                msg: "我是一个弹窗",
                time:3
            }
        },
        // beforeMount(){
        // // console.log(this.$el);
        // },
        computed: {
            getTime(){
                return "animation-duration:"+this.time+"s";
            }
        },
        mounted() {
            document.body.appendChild(this.$el);
            setTimeout(()=>{
                //动画执行完后，清掉Dom
                document.body.removeChild(this.$el);
            },3000)
        },

    });
    function showTip(msg1,time) {
        var tip = new TipBox();
        if(msg){
            tip.msg=msg;
        }
        if(time){
            tip.time=time;
        }
        tip.$mount();
        console.log(tip,tip.$el);
    }
</script>

</html>